<template>
  <el-form label-width="80px" size="small">
    <el-row>
      <el-col :span="6">
        <el-form-item label="学科">
          <el-select
            @change="changeSubject"
            v-model="requestParams.subjectID"
            placeholder="请选择"
          >
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="二级目录">
          <el-select v-model="requestParams.catalogID" placeholder="请选择">
            <el-option
              v-for="item in directorysOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签">
          <el-select v-model="requestParams.tags" placeholder="请选择">
            <el-option
              v-for="item in tagsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键字">
          <el-input v-model="requestParams.keyword"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="试题类型">
          <el-select v-model="requestParams.questionType" placeholder="请选择">
            <el-option
              v-for="item in questionType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度">
          <el-select v-model="requestParams.difficulty" placeholder="请选择">
            <el-option
              v-for="item in difficulty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向">
          <el-select v-model="requestParams.direction" placeholder="请选择">
            <el-option
              v-for="item in direction"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="录入人">
          <el-select v-model="requestParams.creatorID" placeholder="请选择">
            <el-option
              v-for="item in usersOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input v-model="requestParams.remarks"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input v-model="requestParams.shortName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="城市">
          <el-row>
            <el-col :span="12">
              <el-select
                v-model="requestParams.province"
                placeholder="请选择"
                style="padding-right: 5px"
                @change="hanldeCity"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select v-model="requestParams.city" placeholder="请选择">
                <el-option
                  v-for="item in areaOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <el-col :span="6" style="text-align: right">
        <el-button size="small" @click="clear">清除</el-button>
        <el-button type="primary" size="small" @click="filter">搜索</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { simple as reqgetSubjectSimple } from '@/api/hmmm/subjects.js'
import { simple as reqgetDirectorysSimple } from '@/api/hmmm/directorys.js'
import { simple as reqgetTagsSimple } from '@/api/hmmm/tags.js'
import { simple as reqgetUsersSimple } from '@/api/base/users.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys.js'
export default {
  async created () {
    const { data: subjectArr } = await reqgetSubjectSimple()
    this.subjectOptions = subjectArr
    const { data: usersArr } = await reqgetUsersSimple()
    this.usersOptions = usersArr
  },
  props: {
    getList: {
      type: Function
    }
  },
  data () {
    return {
      subjectList: {},
      // 请求
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: 'all'
      },
      // 学科
      subjectOptions: [],
      // 二级目录
      directorysOptions: [],
      // 标签
      tagsOptions: [],
      // 试题类型
      questionType,
      // 难度
      difficulty,
      // 方向
      direction,
      // 录入人
      usersOptions: [],
      // 省
      cityOptions: getCity(),
      // 城
      areaOptions: []
    }
  },
  methods: {
    // 选择学科触发
    async changeSubject (subjectID) {
      const { data: directoryArr } = await reqgetDirectorysSimple({
        subjectID
      })
      this.directorysOptions = directoryArr
      const { data: tagArr } = await reqgetTagsSimple({ subjectID })
      this.tagsOptions = tagArr
      // this.tagsOptions = data
    },
    // 选择城市触发
    hanldeCity (province) {
      this.areaOptions = getArea(province)
    },
    // 清除
    clear () {
      for (const key in this.requestParams) {
        if (!(key === 'page' || key === 'pagesize' || key === 'chkState')) {
          this.requestParams[key] = null
        }
      }
      this.getList(this.requestParams)
    },
    // 查找
    filter () {
      this.requestParams.page = 1
      this.getList(this.requestParams)
    }
  }
}
</script>

<style>
</style>
